<template>
    <div class="page">
     <div class="page-head">
       <el-row>
         <el-col :span="24"><div class="grid-content">
           <div style="display: flex ;justify-content: space-between;margin: 0px 10px">
             <div style="display: flex">
               <el-avatar style="margin-top: 15px" src="https://com-hqj-oss.oss-cn-beijing.aliyuncs.com/shijuan/filelist/logo.png"/>
               <h2 style="margin-left: 10px">君瑶博客</h2>
             </div>
             <div style="display: flex;justify-content: space-evenly;margin-top: 15px">
               <div >
                 <el-input
                   placeholder="请输入内容"
                   prefix-icon="el-icon-search"
                   v-model="seek">
                 </el-input>
               </div>
               <div style="margin-left: 5px">
                 <el-button type="danger" @click="search()" plain>搜索</el-button>
               </div>
             </div>
             <div style="line-height: 60px;margin-top: 5px;max-width: 500px" v-for="(item,index) in menuName " :key="index">
               <div style="margin-left: 10px;">
                 <el-dropdown @command="navigation" >
                   <span class="el-dropdown-link"><el-link @click="option(index)" type="primary" style="font-size: 20px">{{item.name}}</el-link></span>
                   <el-dropdown-menu slot="dropdown">
                     <el-dropdown-item :command="inde" v-for="(ite,inde) in item.value" :key="inde" @click="skips1(inde)">
                       <el-link @click="skips1(index,inde)">
                         {{ite.classifyName}}
                       </el-link>
                     </el-dropdown-item>
                   </el-dropdown-menu>
                 </el-dropdown>
               </div>
             </div>

             <div style="display: flex">
               <div>
                 <el-avatar style="margin-top: 15px" :src="personalDetails.userImg"/>
               </div>
               <div style="margin-left: 10px;margin-top: 25px;">
                <el-dropdown @command="handleCommand" >
                    <span class="el-dropdown-link" :style="personalDetails.userColor">{{personalDetails.username}}</span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="1" >我的博客</el-dropdown-item>
                      <el-dropdown-item command="2">发表博客</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
               </div>
             </div>
           </div>
         </div></el-col>
       </el-row>
     </div>
      <div>
        <el-dialog
          style="color: red"
          title="提示"
          :visible.sync="dialogVisible"
          width="30%"
          >
          <div>
            <span style="margin-left: 25px">联系管理员获取账户,QQ: </span><span style="color: red"> 2695818931</span>
            <el-form style="margin-top: 10px" ref="form" :rules="rules" :model="form" label-width="80px">
              <el-form-item label="账户" prop="username">
                <el-input v-model="form.username"/>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="form.password"/>
              </el-form-item>
              <el-form-item>
                <el-button type="danger" @click="onSubmit" size="medium" style="width: 100%">立即登录</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-dialog>
      </div>
    <router-view/>
    </div>
</template>

<script>
  import {homeAll,login} from '../api/axiosRequest'
    export default {
        name: "",
        data(){
          return{
            menuName:[{name:'主页',value:[{classifyCode:0,classifyName:'试题练习'}]},
              {name:'学习资料',value:[]},
              {name:'精华博客',value:[] },
              {name:'资源网站汇集',value:[] },{name:'关于我们',value:[] }],
            seek:'',
            dialogVisible :false,
            form: {
              username: '',
              password: '',
            },
            rules: {
              username: [
                {required: true, message: '请输入账户', trigger: 'blur'},
                {min: 3, max: 15, message: '长度在 8 到 15 个字符', trigger: 'blur'}
              ],
              password: [
                {required: true, message: '请输入密码', trigger: 'blur'},
                {min: 3, max: 15, message: '长度在 8 到 15 个字符', trigger: 'blur'}
              ],
            },
            personalDetails:{
              username:'尚未登录',
              userImg:'https://com-hqj-oss.oss-cn-beijing.aliyuncs.com/shijuan/filelist/logo.png',
              userColor:'color: red',
              userId:0,
            },
          }
        },
      mounted() {
          this.selectHomeAll();
      },
      methods:{
        navigation(command){
          console.log("耳聪",command);
        },
        skips1(index,id){
          const _this = this;
          if( index === 0){
            if(id===0){
              _this.$router.push("/testQuestions");
            }
          }
          console.log(index,id,"=========9999==========")
        } ,
        selectHomeAll(){
          homeAll().then(res=>{
            // this.menuName[0].value=res.data.data[0];
            this.menuName[1].value=res.data.data[0];
            this.menuName[2].value=res.data.data[1];
            this.menuName[3].value=res.data.data[2];
            console.log(res)
          })
        } ,
        handleCommand(command) {
          const _this = this;
          if(command === "1"){
            this.dialogVisible = true;
          }
          if (command === "2"){
            console.log(this.personalDetails.username);
             if(this.personalDetails.username === '尚未登录'){
               this.$alert('请先登录', '错误提示', {
                 confirmButtonText: '确定',
                 callback: action => {
                   this.$message({
                     type: 'info',
                     message: `action: ${ action }`
                   });
                 }
               });
             }else{
               console.log(this.personalDetails.userId,'用户ID');
               var id=this.personalDetails.userId;
              this.$router.push({name:'About',params:{id:myid}});
             }
          }
        },
        search(){
          const _this = this;
          _this.$router.push(`/search/${this.seek}`)
        },
        option(index){
          const _this = this;
          if(index === 0){
            _this.$router.push("/main")
          } else if (index === 1){
            _this.$router.push("/study")
          }else if(index === 2){
            _this.$router.push("/essence")
          } else if (index === 3){
            _this.$router.push('/website')
          }else if (index === 4){
            _this.$router.push("/aboutUs")
          }
          console.log(index)
        },
        onSubmit() {
          //this表示当前请求  赋值给——this后_this就是全局的对象
          const _this = this;
          login(this.form).then(res=>{
            console.log("测试登录状态",res.data.data.code);
            if(res.data.code === 200){
              const jwt = res.headers['authorization'];
              const userInfo = res.data.data;
              console.log(userInfo);
              //往状态管理里面赋值
              _this.$store.commit("SET_TOKEN",jwt);
              _this.$store.commit("SET_USERINFO",userInfo);
              this.personalDetails.username = _this.$store.getters.getUser.username;
              this.personalDetails.userImg = _this.$store.getters.getUser.avatar;
              this.personalDetails.userColor = "";
              this.personalDetails.userId = res.data.data.id;
              this.dialogVisible=false;
              //获取userinfo信息
              console.log("登录消息",_this.$store.getters.getUser);
            }
            console.log(res);
            console.log(res.headers);
           })
        },
      }
    }
</script>

<style scoped lang="scss">
.page{
  max-width: 1200px;
  margin:  0px auto;
  .page-head{
    .el-row {
      text-align:center;
      border: 1px  cornsilk;
      border-radius: 20px;
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .el-col {
      border-radius: 4px;
    }
    .grid-content{
      border-radius: 4px;
      min-height: 36px;
      background:#E6A23C;
    }
    .el-dropdown-link {
      cursor: pointer;
      color: #409EFF;
    }
    .el-icon-arrow-down {
      font-size: 12px;
    }
  }
}
</style>
